<template>
    <el-dialog
        title="规格设置"
        :visible.sync="visible"
        width="640px">
        <el-button type="primary" style="margin-bottom: 20px;" @click="handleAdd">新增规格</el-button>
        <el-table
            border
            :data="tableData"
            style="width: 100%">
            <el-table-column prop="title" label="标题" align="center">
                <template slot-scope="scope">
                    <el-input v-model="tableData[scope.$index].title" placeholder="规格标题" v-if="scope.row.isEdit === 1"></el-input>
                    <span v-else>{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center" width="130" v-if="false">
                <template slot-scope="scope">
                    <el-select v-model="tableData[scope.$index].type" placeholder="选择类型" v-if="scope.row.isEdit === 1">
                        <el-option :value="1" :label="'固定收费'"></el-option>
                        <el-option :value="2" :label="'计时收费'"></el-option>
                    </el-select>
                    <span v-else>{{ scope.row.type === 1 ? '固定收费' : '计时收费' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="originalPrice" label="原价" align="center">
                <template slot-scope="scope">
                    <el-input v-model="tableData[scope.$index].originalPrice" placeholder="原价" v-if="scope.row.isEdit === 1"></el-input>
                    <span v-else>{{ scope.row.originalPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="价格" align="center">
                <template slot-scope="scope">
                    <el-input v-model="tableData[scope.$index].money" :placeholder="scope.row.type === 1 ? '固定价格' : '每分钟价格'" v-if="scope.row.isEdit === 1"></el-input>
                    <span v-else>{{ scope.row.money }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.isEdit === 1">
                        <el-button type="text" size="small" @click="handleSave(scope.$index)">保存</el-button>
                    </div>
                    <div v-else>
                        <el-button type="text" size="small" @click="handleEdit(scope.$index)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.$index)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="onConfirm">确 定</el-button>
          </span>
    </el-dialog>
</template>
<script>
export default {
    name: "SkuEdit",
    props: {
        api: {
            type: Object,
            default: ()=> {}
        }
    },
    data() {
        return {
            visible: false,
            fuwuData: {},
            tableData: [],
            delIds: []
        }
    },
    methods: {
        show(row) {
            this.fuwuData = row
            this.visible = true
            this.getList()
        },
        getList() {
            const params = {fuwuId: this.fuwuData.id}
            this.request.get(this.api.sku, {params}).then(res=>{
                this.tableData = res.data || []
            })
        },
        handleAdd() {
            this.tableData.push({
                fuwuId: this.fuwuData.id,
                type: 1,
                money: '',
                title: '',
                isEdit: 1
            })
        },
        handleEdit(index) {
            this.$set(this.tableData[index], 'isEdit', 1)
        },
        handleDelete(index) {
            if (this.tableData[index].id)
                this.delIds.push(this.tableData[index].id)
            this.tableData.splice(index, 1)
        },
        handleSave(index) {
            this.$set(this.tableData[index], 'isEdit', 0)
        },
        onConfirm() {
            let errMsg = ''
            for (let i = 0; i < this.tableData.length; i++) {
                let row = this.tableData[i]
                if (!row.title) {errMsg = '请输入规格标题'; break;}
                if (!row.money) { errMsg = (row.type === 1 ? '请输入固定价格' : '请输入每分钟价格'); break; }
                if (row.isEdit === 1) { errMsg = '存在未保存的规格'; break;}
            }
            if (errMsg) return this.$message.error(errMsg)
            this.request.post(this.api.sku, {
                skus: this.tableData,
                delIds: this.delIds
            }).then(res=>{
                if (res.code === 1){
                    this.$message.success('保存成功');
                    this.visible = false
                }
            })
        }
    }
}
</script>

<style scoped>

</style>
